<template>
  <div class="add-info">
    <div class="submmit">
      <el-button type="primary" style="float:right;" @click="saveinfo">保存优惠码信息</el-button>
    </div>
    <div class="create-main">
      <el-form ref="promcode" :model="promcode" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-input v-model="promcode.batchType" type="hidden"/>
        <el-form-item label="优惠码名称" prop="name">
          <el-input v-model="promcode.name"/>
        </el-form-item>
        <el-form-item label="优惠方式" prop="wayType">
          <el-radio-group v-model="promcode.wayType">
            <el-radio label="minus">抵价</el-radio>
            <el-radio label="discount">打折</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="promcode.wayType === 'minus'" label="抵价金额" prop="rate">
          <el-input v-model="promcode.rate"/>
          元
        </el-form-item>
        <el-form-item v-if="promcode.wayType === 'discount'" label="打折" prop="rate">
          <el-input v-model="promcode.rate"/>
          折
        </el-form-item>
        <el-form-item label="生成数量" prop="number">
          <el-input v-model="promcode.number"/>
          个<br>生成数量必须在1～9999之间
        </el-form-item>
        <el-form-item label="优惠码前缀" prop="prefix">
          <el-input v-model="promcode.prefix"/>
          <br>优惠码前缀不可重复，不占优惠码位数
        </el-form-item>
        <el-form-item label="优惠码位数" prop="codeByte">
          <el-input v-model="promcode.codeByte"/>
          <br>优惠码位数必须在5～15位之间
        </el-form-item>
        <el-form-item label="有效期至" prop="endTime">
          <el-date-picker v-model="promcode.endTime" type="date" placeholder="选择日期" style="width: 400px"/>
        </el-form-item>
        <el-form-item label="优惠说明">
          <el-input v-model="promcode.batchExplain"/>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
  import CourseList from './createList/courseList'
  import ClassList from './createList/classList'
  import MemberList from './createList/memberList'
  import {addNewPromcode} from '@/api/operate/promcode' // 数据接口
  import {getTenantId, getUserId, getUserName} from '@/utils/auth'

  export default {
    components: {
      CourseList,
      ClassList,
      MemberList
    },
    data() {
      return {
        promcode: {
          name: '',
          wayType: 'minus',
          rate: '',
          batchType: 'coupon',
          number: '8',
          prefix: '',
          codeByte: '',
          endTime: '',
          batchExplain: ''
        },
        rules: {
          name: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
          wayType: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
          rate: [
            {required: true, message: '不能为空', trigger: 'blur'},
          ],
          number: [
            {required: true, message: '不能为空', trigger: 'blur'},
            {min: 1, max: 4, message: '1～9999', trigger: 'blur'},
            {pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入长度不能超过4位的整数'}
          ],
          prefix: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
          codeByte: [
            {required: true, message: '不能为空', trigger: 'blur'},
            {pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数'},
            {
              validator(rule, value, callback) {
                if (!value) {
                  return callback(new Error('输入不可以为空'));
                }
                setTimeout(() => {
                  if (!Number(value)) {
                    callback(new Error('请输入数字'));
                  } else {
                    if (value < 5 || value > 15) {
                      callback(new Error('请输入[5,15]之间的数字'));
                    } else {
                      callback();
                    }
                  }
                }, 1000);
              }
            }
          ],
          endTime: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      saveinfo() {
        this.$refs.promcode.validate((valid) => {
          if (valid) {
            this.promcode.userId = getUserId()
            this.promcode.userName = getUserName()
            this.promcode.tenantId = getTenantId()
            addNewPromcode(this.promcode).then(() => {
              this.$notify({
                title: '成功',
                message: '优惠码已创建！',
                type: 'success',
                duration: 2000
              })
              this.$router.push('/operate/promcode')
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .add-info {
    .create-main {
      width: 100%;
      padding: 52px 52px 0 52px;

      .el-form {
        .el-input {
          width: 400px;
        }
      }

      .create-form {
        .el-form-item__label {
          font-size: 18px;
        }

        .hide {
          text-align: left;

          .el-input__inner {
            font-size: 20px;
            border-top-width: 0;
            border-left-width: 0;
            border-right-width: 0;
            border-bottom-width: 1px;
            /*outline: medium;*/
          }
        }
      }
    }

    .submmit {
      width: 100%;
      height: 70px;
      line-height: 70px;
      background-color: #e6eaee;
      padding-right: 30px;
      padding-top: 17px;
    }
  }
</style>
